<template>
  <el-container class="home_container">


    <!-- 头部区域 -->
    <el-header class="header">
      <div>
        <img src="../assets/setting.png">
        <span>后台管理系统</span>
      </div> 
      <el-button type="info" @click="loginOut" class="btn">退出登陆</el-button>
    </el-header>




    <!-- 主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="toggleWidth">
        <div class="toggle_button" @click="toggleBtn">{{toggle}}</div>
        <el-menu class=""
        background-color="#00c4c4"
        text-color="#ffffff"
        active-text-color="#ffd04b"
        :unique-opened="true"
        mode="vertical"
        :collapse="toggleBoolean"
        :collapse-transition="false"
        :router="true"
        >
          
          <!-- 一级导航栏   这里的index必须为字符串 加了：所以得拼接字符串 -->
          <el-submenu :index=" '' + item.id " v-for="item in listValue" :key="item.id">
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span style="margin-left:7px;">{{item.authName}}</span>
            </template>


            <!-- 二级导航栏 -->
              <el-menu-item :index=" '/' + i.path" v-for="i in item.children" :key="i.id">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{i.authName}}</span>
                </template>
              </el-menu-item>


          </el-submenu>

        </el-menu>
      </el-aside>



      <!-- 右侧主体 -->
      <el-main>
        <!-- 占位符 -->
        <router-view></router-view>
      </el-main>




    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      toggle:"展开",
      toggleBoolean:false,
      toggleWidth:'200px',
      // 左侧列表
      listValue:[],
      // 小图标列表
      iconsObj:{
        '125':'iconfont icon-user',
        '103':'iconfont icon-tijikongjian',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      }
    };
  },
  methods: {
    // 切换展开收起函数
    toggleBtn(){
      this.toggleBoolean == false ? this.toggle = "收起" : this.toggle = "展开";
      this.toggleBoolean = !this.toggleBoolean;
      this.toggleWidth == '200px' ? this.toggleWidth = '64px' : this.toggleWidth = '200px';
    },
    //获取菜单列表
    async getListValue(){
      let {data:{data}} = await this.$axios.get("menus");
      this.listValue = data;
    },
    //退出按钮
    loginOut() {
      window.sessionStorage.clear();
      this.$router.push("/login");
      this.$message.success("已退出!");
    },
  },
  created(){

    this.getListValue();

  }
};
</script>

<style lang="less" scoped>
.home_container{
  height: 100%;
  .header{
    background-color: rgb(160, 160, 160);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    div{
      height: 100%;
      display: flex;
      align-items: center;
      img{
        height: 100%;
        margin-right: 15px;
      }
      span{
        color: white;
        font-size: 20px;
      }
    }
    .btn{
      color: black;
      background-color: rgb(122, 122, 122);
      &:hover{
        background-color: rgb(87, 87, 87);
      }
    }

  }



.el-aside{
  color: white;
  background-color: #00c4c4;
  transition: 0.5s;
  .toggle_button{
      background-color: #00a5a5;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: center;
  }
  .el-menu{
    border-right: none;
  }
}


}




</style>